<template>
    <div class="login">
        <div class="loginform">
            <div style="margin-top: 30px;">
                <el-button type="text" class="title" :disabled="disabled" @click="convert()">账号密码登录</el-button>
                <div class="title">/</div>
                <el-button type="text" class="title" :disabled="!disabled" @click="convert()">手机号登录</el-button>
            </div>
            <div v-if="disabled">
                <el-form :model="user" :rules="rules" ref="user">
                    <div class="menu">
                        <el-form-item prop="account">
                            <el-input placeholder="请输入账号" v-model="user.account"></el-input>
                        </el-form-item>
                    </div>
                    <div class="menu">
                        <el-form-item prop="password">
                            <el-input placeholder="请输入密码" v-model="user.password" type="password"></el-input>
                        </el-form-item>
                    </div>
                    <div class="menu">
                        <el-form-item>
                            <el-button type="primary" class="button" @click="login()">登录</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
            <div v-if="!disabled">
                <el-form :model="phone" :rules="rules" ref="phone">
                    <div class="menu">
                        <el-select :placeholder="select" class="select" v-model="select">
                            <el-option v-for="item in options" :key="item.en" :label="item.tel" :value="item.en">
                                <span style="float: left">{{ item.tel }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
                            </el-option>
                        </el-select>
                        <el-form-item prop="phone_number">
                            <el-input placeholder="请输入手机号" v-model="phone.phone_number" class="phone"></el-input>
                        </el-form-item>
                    </div>
                    <div class="menu">
                        <el-form-item prop="code">
                            <el-input placeholder="请输入验证码" v-model="phone.code" class="code"></el-input>
                            <el-button class="buttontt" @click="getcode" :disabled="code_disabled">{{ code_text }}</el-button>
                        </el-form-item>
                    </div>
                    <div class="menu">
                        <el-form-item>
                            <el-button type="primary" class="button" @click="login2()">登录</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
            <div style="margin-top: 20px;">
                <div style="float:left;margin-left: 30px;">
                    <el-link :underline="false" @click="jump_url('/')">返回首页</el-link>
                </div>
                <div style="float:right;margin-right: 30px;">
                    <el-link :underline="false" @click="jump_url('/register')">注册账号</el-link>
                </div>
            </div>
            <div>
                <el-checkbox class="checkbox" v-model="checkbox">我已阅读并同意<router-link to="/service" class="service" target="_blank">服务协议</router-link>和<router-link to="/service"  class="service" target="_blank">隐私保护指引</router-link></el-checkbox>
            </div>
        </div>

        
    </div>
</template>

<script>
import UserChatApi from "@/api/user-chat"
import PersonalCenterApi from "@/api/personal-center"
import UserManagementApi from "@/api/user-management"
import VideoPlayApi from "@/api/video-play"
import VideoSearchApi from "@/api/video-search"
import data from '../static/Telephone_area_code.json'
export default {
    data(){
        return{
            disabled:true,//登录模式，true为账号密码登录，false为手机号登录
            user:{//账号密码登录表单
                account:'',//账号
                password:'',//密码
            },
            select: data.data[0].tel,//手机区域
            options: data.data,//json文件数据
            phone:{
                phone_number:'',//手机号
                code:'',//验证码
            },
            code_bool:false,//正确的验证码
            code_disabled:false,//获取验证码是否可点击
            code_text:'获取验证码',//获取验证码按钮文本
            rules:{//校验规则
                account:[
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min:3,max:180, message:'账号最小3位，最大18位', trigger:'blur' },
                ],
                password:[
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min:3,max:180, message:'密码最小3位，最大18位', trigger:'blur' },
                ],
                phone_number:[
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { min:11,max:11, message:'请输入正确的手机号', trigger:'blur' },
                ],
                code:[
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                    { min:6, max:6, message:'验证码格式错误', trigger:'blur' }
                ]
            },
            checkbox:false,//是否同意协议
            
        }
    },
    methods:{
        //参数为url的跳转
        jump_url(url){
            this.$router.push(url)
        },
        //改变登录模式
        convert(){
            if(this.disabled == true){
                this.disabled = false
            }else{
                this.disabled = true
            }
        },
        //账号密码登录
        login(){
            var that = this
            that.$refs['user'].validate((valid) => {
                if(valid){
                    //表单通过
                    if(that.checkbox == true){
                        UserManagementApi.SubmitLoginByAccount(that.user).then(res => {
                            if(res.data.data != null){
                                var token = res.data.data
                                //登录成功
                                sessionStorage.setItem('token',token)
                                UserManagementApi.SubmitUser().then(ress => {
                                    sessionStorage.setItem('id',ress.data.data.id)
                                })
                                that.$router.push('/')
                            }else{
                                //登录失败
                                alert('用户名或密码错误')
                            }
                        })
                    }else{
                        alert('请阅读并同意服务协议和隐私保护指引')
                    }
                }else{
                    return false
                }
            })
        },
        //获取验证码
        getcode() {
            this.$refs['phone'].validateField(['phone_number'],(valid) => {
                if(!valid){
                    //提交获取短信请求
                    UserManagementApi.SubmitPhoneCode(this.phone.phone_number).then(res => {
                        if(res.data.code!=200){
                            alert(res.data.msg)
                            return false
                        }
                        var time = '60'
                        var timer = null
                        var _this = this
                        _this.code_text = time + 's后可操作'
                        _this.code_disabled=true
                        timer = setInterval(function () {
                            time--
                            _this.code_text = time + 's后可操作'
                            if (time == '0') {
                                _this.code_text = '获取验证码'
                                _this.code_bool = false
                                _this.code_disabled=false
                                //清除定时器
                                clearInterval(timer);
                            }
                        }, 1000)
                    })
                }else{
                    //表单未通过
                    return false
                }
            })
        },
        //手机号登录
        login2(){
            this.$refs['phone'].validate((valid) => {
                if(valid){
                    //表单通过
                    if(this.checkbox==true){
                        UserManagementApi.SubmitLoginByPhone(this.phone.phone_number,this.phone.code).then(res => {
                            if(res.data.code == 200){
                                var token = res.data.data
                                sessionStorage.setItem('token',token)
                                UserManagementApi.SubmitUser().then(ress => {
                                    sessionStorage.setItem('id',ress.data.data.id)
                                })
                                this.$router.push('/')
                            }else{
                                alert(res.data.msg)
                            }
                            
                        })
                    }else{
                        alert('请阅读并同意服务协议和隐私保护指引')
                    }
                }else{
                    //表单未通过
                    return false
                }
            })
        }
    }
};
</script>

<style scoped>
@import "../assets/css/body.css";
.login{
    height: 100%;
    width: 100%;
    background-image: url('../assets/image/登录背景.png');
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
}
.loginform{
    float: right;
    height: 100%;
    width: 400px;
    background-color: rgb(229, 226, 226,0.9);
}
.menu{
    margin-top: 20px;
    margin-left: 30px;
    margin-right: 30px;
}
.button{
    width: 100%;
}
.title{
    display: inline-block;
    font-size: 170%;
}
.checkbox{
    margin-top: 20px;
}
.service{
    text-decoration: none;
    color: darkblue;
}
.select {
    width: 20%;
    float: left;
    z-index: 1;
}
.phone {
    float: left;
    width: 80%;
}
.buttontt {
    float: left;
    margin-top: 20px;
    width: 30%;
}
.code {
    float: left;
    margin-top: 20px;
    width: 70%;
}
</style>